<template>
    <head-page></head-page>
    <div class="common-layout">
        <el-button type="warning" style="margin-left: -88%;  margin-top: 10px" :icon="ArrowLeft" @click="back()">返回搜索页面</el-button>
        <el-container style="margin-top: -2%">
            <el-main class="body">
                <div class="box">
                    <div style="font-weight: bold; font-size: 30px; font-family: 华文楷体,serif; margin-left: 5%; margin-top: 2%">用户信息</div>
                    <el-descriptions title="" :column="2" border style="margin-top: 2%; width: 90%; margin-left: 5%">
                        <el-descriptions-item
                            label="用 户 昵 称"
                            label-align="center"
                            align="center"
                            label-class-name="my-label"
                            class-name="my-content"
                            width="180px"
                        >{{username}}</el-descriptions-item
                        >
                        <el-descriptions-item label="邮 箱 号 码" label-align="center" align="center"
                        >{{email}}</el-descriptions-item
                        >
                        <el-descriptions-item label="用 户 状 态" label-align="center" align="center">
                            <el-tag size="small">在线</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="其 他 操 作" label-align="center" align="cecnter"
                        ><el-button style="margin-left: 10%" type="success"  @click="openinsertForm"> 更改邮箱账号 </el-button>
                            <el-dialog title="修改邮箱号" v-model="dialogFormVisible">
                                <el-form :model="insertForm">
                                    <el-form-item label="新的邮箱号" :label-width="formLabelWidth">
                                        <el-input v-model="insertForm.email" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <template v-slot:footer>
                                    <div class="dialog-footer">
                                        <el-button @click="closeDialogForm">取消</el-button>
                                        <el-button type="primary" @click="changeEmail">确定</el-button>
                                    </div>
                                </template>
                            </el-dialog>
                            <el-button style="margin-left: 5%" type="primary" @click="openForm"> 修改用户名 </el-button>
                            <div>
                                <el-dialog title="修改用户名" v-model="formVisible">
                                    <el-form :model="form">
                                        <el-form-item label="新的用户名" :label-width="formLabelWidth">
                                            <el-input v-model="form.name" autocomplete="off"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <template v-slot:footer>
                                        <div class="dialog-footer">
                                            <el-button @click="closeForm">取消</el-button>
                                            <el-button type="primary" @click="changeName">确定</el-button>
                                        </div>
                                    </template>
                                </el-dialog>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-rate v-model="value" clearable style="margin-top: 1%;margin-left: 82%" />
                </div>
                <div style="margin-top: 2%">
                    <el-text style="margin-bottom: 10px; margin-left: -900px; font-size: 16px">律师评价</el-text>
                    <el-table
                            :data="nowData"
                            stripe
                            border
                            style="width: 1000px; margin-left: 1%; margin-top: 2%"
                            class="recon"
                            :default-sort="{ prop: 'id', order: 'ascending' }">
                        <el-table-column
                                fixed
                                prop="id"
                                label="编号"
                                sortable
                                width="80">
                        </el-table-column>
                        <el-table-column
                            prop="lawyerName"
                            label="律师姓名"
                            sortable
                            width="120">
                        </el-table-column>
                        <el-table-column
                                prop="score"
                                label="用户评分"
                                sortable
                                width="200">
                            <template v-slot="row">
                                <el-rate
                                    v-model="row.row.score"
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value} 星"/>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="profileUrl"
                            label="律师主页"
                            width="120">
                            <template #default="row2">
                                <el-link :href="row2.row.profileUrl" type="info">律师主页</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="content"
                                label="用户评价"
                                width="400">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template v-slot="scope">
                                <el-button type="primary" size="small" @click="openForm2(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-dialog title="warning" v-model="formVisible2">
                        <div>是否要永久删除该条评论？</div>
                        <template v-slot:footer>
                            <div class="dialog-footer">
                                <el-button @click="closeForm2">取消</el-button>
                                <el-button type="primary" @click="deleteComment">确定</el-button>
                            </div>
                        </template>
                    </el-dialog>
                    <el-pagination
                        ::current-page="searchData.current"
                        :page-size="searchData.limit"
                        :total="tableData.length"
                        :pager-count="6"
                        layout="jumper, prev, pager, next, total"
                        @current-change="getData"
                        v-if="tableData.length !== 0"
                        style="margin-left: 30%;  margin-top: 5%">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </div>
    <br>
    <el-text  style="margin-left: -850px; font-size: 16px; ">用户历史搜索记录</el-text>
    <div class="box2">
        <el-tag :key="tag.id"
                v-for="tag in tags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
                style="margin-left: 1%"
                class="tag" type="info" size="large">{{tag.history}}
        </el-tag>
    </div>
</template>

<script setup>
import HeadPage from "@/components/HeadPage.vue";
import {ArrowLeft} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
window.onload=()=>{
    load();
};
let tags = ref()
const handleClose = (tag) => {
    tags.value.splice(tags.value.indexOf(tag), 1)
}
const formVisible2 = ref(false);
const closeForm2 = () =>{
    formVisible2.value = false;
}

const formLabelWidth = '100px';

import {ElMessage} from "element-plus";
import router from "@/router";
import {useRoute} from "vue-router";
import axios from "axios";

const tableData = ref([]);
onMounted(()=>{
    load();
})
let ch = useRoute().params;
const load = () => {
    userid = ch['id'].toString()
    getInform()
    getComment()
    getHistory()
};

function getHistory(){
    axios.get('http://localhost:8081/history/detail', {
        params:{
            id: parseInt(userid)
        }
    }).then((message)=>{
        let data = message.data.data
        tags.value = data
        console.log(tags.value)
    })
}

function getInform(){
    axios.get('http://localhost:8081/user/detail',{
        params:{
            id : parseInt(userid)
        }
    }).then((message)=>{
        let data = message.data.data
        email.value = data.email
        username.value = data.name
        password.value = data.passWord
    });
}

// 分页
const nowData = ref([])
const searchData=reactive({
    current:1,
    limit:10
})
function pageQuery(current ,limit){
    // 模仿分页查询，将表格的数据裁切一下
    //     1     2     3
    //下标 0-9 10-19 20-29
    let begin=current*limit-limit
    //这里不减一是因为，slice方法裁切是左闭右开数组
    let end=current*limit
    nowData.value=tableData.value.slice(begin,end)
}
function getData(val = 1){
    searchData.current=val
    // 先把数据搞上
    pageQuery(searchData.current,searchData.limit)
}


function getComment(){
    axios.get('http://localhost:8081/user/getUsercomment',{
        params:{
            id : parseInt(userid)
        }
    }).then((data)=>{
        tableData.value = data.data.data
        getData()
    }, (message)=>{
        console.log(message.message)
        // ElMessage.error("发生未知错误，请联系管理员");
    });
}

const dialogFormVisible = ref(false)
const username = ref('');
const email = ref('');
const value = ref(5)
let lineId = ref(0)
onMounted(()=>{
    load();
})
const closeDialogForm = () => {
    dialogFormVisible.value = false;
};
const closeForm = () => {
    formVisible.value = false;
};

let password = ref('')

function changeName(){
    axios.post("http://localhost:8081/user/editName",{
        id:parseInt(userid),
        name:form.value.name,
        email:email.value,
        passWord:password.value
    }).then((message)=>{
        ElMessage.success(message.data.msg)
        formVisible.value = false
        getInform()
    })
}

function changeEmail(){
    axios.post("http://localhost:8081/user/editEmail",{
        id:parseInt(userid),
        name:username.value,
        email:insertForm.value.email,
        passWord:password.value
    }).then((message)=>{
        ElMessage.success(message.data.msg)
        dialogFormVisible.value = false
        getInform()
    })
}

const formVisible = ref(false);

const insertForm = ref({
    email:''
})
function openinsertForm(){
    dialogFormVisible.value = true
}
const form = ref({
    name: ''
});
const openForm = () => {
    formVisible.value = true
};
const openForm2 = (item) => {
    formVisible2.value = true
    lineId.value = item
};

let userid = '-1'
onMounted( ()=> {
    let ch = useRoute().params;
    userid = ch['id']
});
const back = () => {
    router.push('/log/'+userid)
}

const deleteComment = ()=>{
    axios.delete("http://localhost:8081/user/deletecomment", {
        params:{
            id: lineId.value
        }
    }).then(()=>{
        ElMessage.success("删除成功")
        getComment()
    })
    formVisible2.value = false
}
</script>


<style scoped>
.body {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    margin-top: 1%;
    margin-left: 5%;
}

.box{
    margin-top: 2%;
    margin-left: 4%;
    width: 950px;
    height: 230px;
    border: 1px #6c6654;
    border-radius: 3em/5em;
    box-shadow: #c7c0b0 2px 2px 1px 1px;
    background-color: #ffffff;
}

.box2{
    margin-top: 2%;
    margin-left: 6%;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 85%;
}

:deep(.my-label) {
    background: var(--el-color-success-light-9) !important;
}
:deep(.my-content) {
    background: var(--el-color-danger-light-9);
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
